<template>
  <el-container>
    <el-aside width="250px">
      <hostsGroupTable function_choice="query" @childClick="envClick" />
    </el-aside>
    <el-container>
      <el-header style="font-size: 12px; width: 100%">
        <el-button-group>
          <el-button
            icon="el-icon-s-tools"
            type="success"
            size="mini"
            @click="open_dialog_app_form('新增')"
            >应用新增</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="open_dialog_app_form('编辑')"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="open_del_app_dialog"
            >删除</el-button
          >
        </el-button-group>
        <el-button-group style="padding-left: 20px">
          <el-button type="primary" size="mini" @click="open_conf_dialog"
            >绑定配置</el-button
          >
        </el-button-group>
      </el-header>
      <el-main>
        <el-table
          @current-change="appCurrentChange"
          highlight-current-row
          row-style="height:20px"
          cell-style="padding:0"
          :data="app_table"
          style="font-size: 10px; width: 100%"
        >
          <el-table-column label="服务器IP" prop="host_ip"> </el-table-column>
          <el-table-column label="应用名称" prop="app_nick"> </el-table-column>
          <el-table-column label="应用包" prop="package_name">
          </el-table-column>
          <el-table-column label="关联软件" prop="soft_nick"> </el-table-column>
          <el-table-column label="备注" prop="comment"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>

  <el-dialog
    :title="dialog_app_form.dialog_app_title"
    v-model="dialog_app_form.dialog_app"
    width="60%"
  >
    <el-form
      ref="form_soft_ref"
      :model="app_form"
      label-width="80px"
      size="mini"
    >
      <el-form-item label="应用名称" prop="app_nick">
        <el-input v-model="app_form.app_nick"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="主机">
            <HostsInput
              in_type="env"
              @childClick="host_codeClick"
              :in_value="env_id"
              :host_value="app_form.host_id"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联软件">
            <SoftInput
              in_type="env"
              :in_value="env_id"
              @childClick="soft_codeClick"
              :soft_value="app_form.soft_id"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联包">
            <packageInput
              project_id=""
              @childClick="package_codeClick"
              :package_value="app_form.package_id"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="辅助命令" prop="comment">
        <el-input v-model="app_form.app_auxiliary_install_cmd"></el-input>
      </el-form-item>
      <el-form-item label="日志目录" prop="soft_restart_cmd">
        <el-input v-model="app_form.app_log_path"></el-input>
      </el-form-item>
      <el-form-item label="重启命令" prop="soft_restart_cmd">
        <el-input v-model="app_form.app_restart_cmd"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="启动命令" prop="soft_start_cmd">
            <el-input v-model="app_form.app_start_cmd"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关闭命令" prop="soft_stop_cmd">
            <el-input v-model="app_form.app_stop_cmd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="心跳检查" prop="soft_restart_cmd">
            <el-input v-model="app_form.app_check_url"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="心跳方式">
            <SysCodeInput
              sys_code_type="app_check_type"
              @childClick="app_check_CodoClick"
              :sys_code_value="app_form.app_check_code"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="comment">
        <el-input v-model="app_form.comment"></el-input>
      </el-form-item>
      <el-form-item label="部署方式" prop="comment">
        <SysCodeInput
          sys_code_type="app_deploy_type"
          @childClick="app_install_CodeClick"
          :sys_code_value="app_form.app_deploy_code"
        />
      </el-form-item>
      <el-form-item>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="部署需求" name="1">
            <el-tabs v-model="editableTabsValue" type="card">
              <el-tab-pane
                :key="item.conf_manage_name"
                v-for="item in install_conf"
                :label="item.conf_manage_nick"
                :name="item.conf_manage_name"
              >
                <div style="margin-bottom: 10px">
                  <el-input
                    placeholder="请输入内容"
                    v-model="item.conf_manage_path"
                  >
                    <template #prepend>配置文件路径</template>
                  </el-input>
                </div>
                <el-input
                  type="textarea"
                  :rows="15"
                  placeholder="请输入内容"
                  v-model="item.conf_manage_content"
                >
                </el-input>
              </el-tab-pane>
            </el-tabs>
          </el-collapse-item>
        </el-collapse>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog_app_form.dialog_app = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="comnit_app_data" size="mini"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>

  <ConfirmationBox
    text="确认删除选中行"
    @childClick="delete_app_conf"
    :in_value="open_del_app_dialog_value"
  >
  </ConfirmationBox>

  <ConfDialog
    @childClick="close_open_conf_dialog_value"
    :in_value="open_conf_dialog_value"
    :app_id="app_id"
    :props_title_name="app_nick"
  />
</template>

<script>
import hostsGroupTable from "@/components/communal/hosts_group_table.vue";
import SysCodeInput from "@/components/communal/sys_code_input.vue";
import HostsInput from "@/components/communal/hosts_input.vue";
import SoftInput from "@/components/communal/soft_input.vue";
import packageInput from "@/components/communal/package_input.vue";
import ConfirmationBox from "@/components/communal/confirmation_box.vue";
import ConfDialog from "@/components/communal/conf_dialog.vue";
import { reactive, ref } from "vue";
import * as Request from "@/general/request";
import { ElMessage } from "element-plus";

export default {
  name: "resource_management",
  setup() {
    let dialog_app_form = reactive({
      dialog_app: false,
      dialog_app_title: "",
    });
    let open_del_app_dialog_value = ref(false);
    let app_nick = ref("");
    let app_id = ref("");
    let env_id = ref("");
    let app_table = ref([]);
    let open_conf_dialog_value = ref(false);
    let app_form = ref({
      host_id: "",
      soft_id: "",
      app_check_code: "",
      app_deploy_code: "",
    });
    let install_conf = ref([]);

    const open_conf_dialog = () => {
      if (!app_id.value) {
        ElMessage.warning("请选择一个应用");
        return;
      }
      open_conf_dialog_value.value = true;
    };

    const open_del_app_dialog = () => {
      if (!app_id.value) {
        ElMessage.warning("请选择删除行");
        return;
      }
      open_del_app_dialog_value.value = true;
    };

    const close_open_conf_dialog_value = () => {
      open_conf_dialog_value.value = false;
    };

    const open_dialog_app_form = (e) => {
      install_conf.value = [];
      if (!env_id.value) {
        ElMessage.warning("请选择一个组");
        return;
      }
      if (e) {
        if (e === "编辑") {
          if (!app_id.value) {
            ElMessage.warning("请选择要编辑的应用");
            return;
          }
          get_app_conf();
        }
        dialog_app_form.dialog_app = true;
        dialog_app_form.dialog_app_title = e;
      }
    };

    const envClick = (e) => {
      env_id.value = e;
      get_env_host_app();
    };

    const comnit_app_data = () => {
      if (dialog_app_form.dialog_app_title === "编辑") {
        put_app_conf();
      } else {
        post_app_conf();
      }
    };

    const host_codeClick = (e) => {
      app_form.value.host_id = e;
    };

    const soft_codeClick = (e) => {
      app_form.value.soft_id = e;
    };

    const package_codeClick = (e) => {
      app_form.value.package_id = e;
    };

    const app_check_CodoClick = (e) => {
      app_form.value.app_check_code = e;
    };

    const app_install_CodeClick = (e) => {
      app_form.value.app_deploy_code = e;

      get_install_confs_require(e);
    };

    const appCurrentChange = (e) => {
      if (e) {
        app_id.value = e.app_id;
        app_nick.value = e.app_nick + "配置管理";
      } else {
        app_id.value = "";
      }
    };

    const get_env_host_app = async () => {
      const response = await Request.GET(
        "/background/home/resource_management/env_host_app",
        { env_id: env_id.value }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          app_table.value = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_app_conf = async () => {
      const response = await Request.GET(
        "/background/home/resource_management/app_conf",
        { app_id: app_id.value }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          // app_form.value = return_data.data
          app_form.value = return_data.data.app_form;
          install_conf.value = return_data.data.install_conf;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_install_confs_require = async (e) => {
      const response = await Request.GET(
        "/background/home/deploy/get_install_confs_require",
        {
          sys_code: e,
          type: "app",
        }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          let install_conf_swap = [];
          let i = 0,
            len = return_data.data.length;
          for (; i < len; ) {
            install_conf_swap.push({
              conf_manage_path: "",
              conf_manage_ids: "",
              conf_manage_code: return_data.data[i]["sys_code"],
              conf_manage_content: "",
              conf_manage_nick: return_data.data[i]["sys_code_name"],
              conf_manage_name: return_data.data[i]["sys_code"],
            });
            i++;
          }
          install_conf.value = install_conf_swap;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const post_app_conf = async () => {
      const response = await Request.POST(
        "/background/home/resource_management/app_conf",
        { app_form: app_form.value, install_conf: install_conf.value }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          dialog_app_form.dialog_app = false;
          await get_env_host_app();
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const put_app_conf = async () => {
      const response = await Request.PUT(
        "/background/home/resource_management/app_conf",
        { app_form: app_form.value, install_conf: install_conf.value }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          dialog_app_form.dialog_app = false;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const delete_app_conf = async (signal) => {
      open_del_app_dialog_value.value = false;

      if (!signal) {
        return;
      }

      const response = await Request.DELETE(
        "/background/home/resource_management/app_conf",
        { app_ids: [app_id.value] }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          open_del_app_dialog_value.value = false;
          await get_env_host_app();
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    return {
      envClick,
      get_env_host_app,
      app_table,
      dialog_app_form,
      comnit_app_data,
      app_form,
      open_dialog_app_form,
      delete_app_conf,
      app_id,
      host_codeClick,
      soft_codeClick,
      app_check_CodoClick,
      app_install_CodeClick,
      appCurrentChange,
      package_codeClick,
      env_id,
      open_del_app_dialog_value,
      open_del_app_dialog,
      open_conf_dialog_value,
      close_open_conf_dialog_value,
      open_conf_dialog,
      app_nick,
      install_conf,
    };
  },
  components: {
    hostsGroupTable,
    SysCodeInput,
    HostsInput,
    SoftInput,
    packageInput,
    ConfirmationBox,
    ConfDialog,
  },
};
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
